import React from "react"
import {Button, Form, Input, Modal, Progress} from "antd"
import JSEncrypt from "jsencrypt"
import {putJSON} from "../../shared/server/index"
import {PUBLIC_KEY, regex_password6} from "../../shared/project-config"
import "./index.less"
import usePwdDetection from "../../shared/libs/password-detection/pwd-detection"
import lock from "../../images/lock.png"
import KeyOutlined from "@ant-design/icons/lib/icons/KeyOutlined";

const inputSize = 'default'


const ResetPassword = ({history}) => {
	const [form] = Form.useForm();
	const {strength, detection} = usePwdDetection()
	const handlePassword = (event) => {
		const value = event.target.value;
		detection(value)
	}

	const resetPassword = (values) => {
		const encrypt = new JSEncrypt();
		encrypt.setPublicKey(PUBLIC_KEY);
		const passwordSecret = encrypt.encrypt(values.newPassword);
		const postData = {
			encrypt: true,
			newPassword: passwordSecret,
		}
		putJSON("/management/active", postData).then(result => {
			if (result) {
				let secondsToGo = 3
				const modal = Modal.success({
					className: 'origin',
					title: '激活成功',
					content: `帐号激活完成, ${secondsToGo}秒后自动退出`,
					okText: '立即登录',
					onOk: () => {
						history.push("/login")
					}
				})

				setInterval(() => {
					secondsToGo = -1
					modal.update({
						content: `帐号激活完成, ${secondsToGo}秒后自动退出`,
					})
				}, 1000)

				setTimeout(() => {
					history.push("/login")
					modal.destroy()
				}, secondsToGo * 1000)


			}
		})
	}
	const onFinishFailed = errorInfo => {
		console.log('Failed:', errorInfo);
	};
	return (
		<div className={'active-page page-bg'}>
			<div className="container box-bg">
				<h1>设置密码</h1>

				<Button type="primary" ghost htmlType="submit" onClick={() => history.push("/login")}>
					暂不设置
				</Button>

				<h3 className="title">为了您的帐号安全,请设置一个新密码</h3>
				<div className={'ld2-avatar'}>
					<img src={lock} alt={''}/>
				</div>
				<Form
					style={{
						paddingTop: 20,
						width: "100%",
						display: "flex",
						flexDirection: "column",
						justifyContent: "center",
						alignItems: "center"
					}}
					form={form}
					name="basic"
					onFinish={resetPassword}
					onFinishFailed={onFinishFailed}
				>
					<Form.Item
						name="newPassword"
						validateFirst={true}
						rules={[
							{required: true, message: '新密码必须填写',},
							{pattern: regex_password6, message: "6-20位字母(至少包含一个字母和数字)"}
						]}
					>
						<div>
							<div style={{width: "100%", display: "flex", alignItems: "center", marginTop: 5}}>
								<span style={{marginRight: 5}}>强度:</span>
								<Progress percent={strength}
								          className={'strength-progress'}
								          showInfo={false}
								          steps={3}
								          strokeColor={
									          strength === 50
										          ? "#ff4d4f"
										          : strength === 75
										          ? "orange"
										          : "#52c41a"}/>

								{strength === 50 ? <span style={{marginLeft: 5}}>强度过低,不建议使用</span> : undefined}
							</div>
							<Input.Password prefix={<KeyOutlined/>}
							                autoComplete={'new-password'}
							                size={inputSize}
							                placeholder="请输入新密码" style={{width: 250}}
							                onChange={handlePassword}/>
						</div>
					</Form.Item>

					<Form.Item
						name="confirm"
						dependencies={['newPassword']}
						validateFirst={true}
						rules={[
							{required: true, message: '确认密码必须填写',},
							({getFieldValue}) => ({
								validator(rule, value) {
									if (!value || getFieldValue('newPassword') === value) {
										return Promise.resolve();
									}
									return Promise.reject('两次密码不一致');
								},
							}),
						]}
					>
						<Input.Password prefix={<KeyOutlined/>}
						                autoComplete={'new-password'}
						                size={inputSize} placeholder="请确认新密码" style={{width: 250}}/>
					</Form.Item>
					<Form.Item>
						<Button type="primary" size={'large'} htmlType="submit" style={{width: 200}}>
							确认设置
						</Button>
					</Form.Item>
				</Form>
			</div>
		</div>
	)
}

export default ResetPassword